import { View, MovableArea, MovableView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { PropsWithChildren, useEffect, useState } from 'react'
import './index.scss'
import './add-btn.scss'

type MyComponentPropsWithChildren = PropsWithChildren<{
    disabled?: boolean,
    clickBtn?: () => void,
    onChange?: () => void,
    x?: number,
    y?: number
}>;

const MoveArea: React.FC<MyComponentPropsWithChildren> = (props) => {
    const [location, setLocation] = useState<{x?: number, y?: number}>({})
    useEffect(() => {
        let view = Taro.createSelectorQuery().select(".movable-area")
        view.boundingClientRect(rect => {
            if (!rect) return
            const width = {width: 0, ...rect}.width
            const height = {height: 0,...rect}.height
            const xVal = props.x === undefined ? ((width - 51.5) / 2) : props.x
            const yVal = props.y === undefined ? (height - 60) : props.y
            setLocation({...location, x: xVal, y: yVal})
        }).exec()
    }, [props.x, props.y])
    return <View>
        <MovableArea className="movable-area" scale-area={false}>
            <MovableView className="movable-view flex-column flex-center"
                onClick={props.clickBtn}
                onChange={props.onChange}
                disabled={props.disabled}
                x={location.x}
                y={location.y}
                direction="all"
                inertia={true}
                out-of-bounds={true}
                damping={40000}
                friction={10}>
                    {props.children}
            </MovableView>
        </MovableArea>
    </View>
}
export default MoveArea